<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- 条件搜索 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="年度" prop="year">
                <a-input v-model="queryParam.year" placeholder="请输入年" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="月份" prop="month">
                <a-input v-model="queryParam.month" placeholder="请输入月份" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div class="table-operations" v-if="deptId == 100">
        <a-button type="primary" @click="$refs.createForm.handleAdd()" v-hasPermi="['manager:perform:add']">
          <a-icon type="plus" />新增
        </a-button>
        <a-button type="primary" @click="handleExport" v-hasPermi="['manager:perform:export']">
          <a-icon type="download" />导出
        </a-button>
      </div>
      <!-- 增加修改 -->
      <create-form
        ref="createForm"
        :treeData="deptOptions"
        @ok="getList"
      />

      <!-- 数据展示 -->
      <a-list
        :grid="{gutter: 16, xl: 4, lg: 3, md: 3, sm: 2, xs: 1}"
        style="margin: 0 -8px"
      >
        <a-list-item :key="item" v-for="item in list" style="padding: 0 8px">
          <a-card>
            <a-card-meta :title="item.deptName">
              <a-avatar slot="avatar" style="color: white; backgroundColor: #1890ff">{{dealDeptName(item.deptName)}}</a-avatar>
            </a-card-meta>
              <a-tooltip v-if="showFlag" class="tool"  title="编辑" slot="actions" @click="$refs.createForm.handleUpdate(item)">
                <a-icon type="edit" />
              </a-tooltip>
              <a-tooltip class="tool"  title="查看图表" slot="actions" @click="openChart(item)">
                <a-icon type="line-chart" />
              </a-tooltip>
              <a-tooltip v-if="showFlag" class="tool"  title="删除" slot="actions" @click="handleDelete(item)">
                <a-icon type="delete" />
              </a-tooltip>
            <div class="content">
              <div>
                <p>年度业绩</p>
                <p>{{item.total}}万</p>
              </div>
              <div>
                <p>已完成业绩</p>
                <p>{{item.complated}}万</p>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
    </a-card>

    <!-- 查看图表 -->
    <a-modal
      title="已完成情况"
      :visible="visible"
      width="50%"
      @cancel="visible = false"
      @ok="visible = false"
    >
    <a-page-header title="渠道占比"/>
        <a-radio-group v-model="queryParam.month" button-style="solid" @change="channelReport()">
          <a-radio-button v-for="(d, index) in monthOptions" :key="index" :value="d.code">{{ d.name }}</a-radio-button>
        </a-radio-group>
        <sales-data :ref="salesData" :data="channelList"/>
        <a-page-header title="业绩"/>
      <rank ref="rank" :data="rankList" :position="'月份*业绩'"/>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import storage from'store'
import { listPerform, delPerform,getReportByDeptId,getChannelReportByParams} from '@/api/manager/perform'
import CreateForm from './modules/CreateForm'
import { tableMixin } from '@/store/table-mixin'
import DeptTree from '../../system/user/modules/DeptTree'
import { treeselect } from '@/api/system/dept'
import moment from 'moment'
import Rank from '../../../components/card/Rank'
import SalesData from '../../SalesData.vue'

export default {
  name: 'Perform',
  components: {
    CreateForm,Rank,SalesData
  },
  mixins: [tableMixin],
  data () {
    return {
      monthOptions:[
        {"name":'一月',code:1},
        {"name":'二月',code:2},
        {"name":'三月',code:3},
        {"name":'四月',code:4},
        {"name":'五月',code:5},
        {"name":'六月',code:6},
        {"name":'七月',code:7},
        {"name":'八月',code:8},
        {"name":'九月',code:9},
        {"name":'十月',code:10},
        {"name":'十一月',code:11},
        {"name":'十二月',code:12},
        {"name":'全年',code:13},
      ],
      channelList:[],
      currentDeptId:null,
      deptId:null,
      rankList:[],
      visible:false,
      list: [],
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      ids: [],
      loading: false,
      total: 0,
      // 查询参数
      queryParam: {
        year: null,
        month:null,
      },
      columns: [
        {
          title: '用户ID',
          dataIndex: 'id',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '校区编号',
          dataIndex: 'deptId',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '年',
          dataIndex: 'year',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '业绩',
          dataIndex: 'perform',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '月',
          dataIndex: 'month',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '18%',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ],
      deptOptions:[],
      showFlag:false,
    }
  },
  filters: {
  },
  created () {
    this.queryParam.year = moment().year();
    this.queryParam.month = (moment().month() + 1) + "";
    this.getList()
    this.getTreeselect()
    this.deptId = storage.get("deptId");
    this.showFlag = storage.get("deptId") == 100;
  },
  computed: {
  },
  watch: {
  },
  methods: {
    channelReport(){
      if(this.queryParam.month == 13){
        this.queryParam.month = null
      }
      getChannelReportByParams(
        {
          deptId:this.queryParam.deptId,
          year: this.queryParam.year,
          month: this.queryParam.month,
        }
      ).then(resp => {
        this.channelList = resp.data;
      });
    },
    getLineReport(){
      getReportByDeptId({
        deptId:this.queryParam.deptId,
        year: this.queryParam.year
      }).then(resp => {
        this.rankList = resp.data;
      });
    },
    openChart(item){
      this.visible = true;
      this.queryParam.deptId = item.deptId
      this.getLineReport();
      this.channelReport();
    },
    dealDeptName(name){
      return name.slice(0,1);
    },
    /** 查询部门下拉树结构 */
    getTreeselect () {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    clickDeptNode (deptId) {
      this.queryParam.deptId = deptId
      this.handleQuery()
    },
    /** 查询校区业绩列表 */
    getList () {
      this.loading = true
      listPerform(this.queryParam).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        deptId: undefined,
        year: undefined,
        perform: undefined,
        month: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 删除按钮操作 */
    handleDelete (item) {
      let that = this;
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk () {
          return delPerform(item.deptId,item.year)
            .then(() => {
              that.getList()
              that.$message.success(
                '删除成功',
                3
              )
          })
        },
        onCancel () {}
      })
    },
    /** 导出按钮操作 */
    handleExport () {
      var that = this
      this.$confirm({
        title: '是否确认导出?',
        content: '此操作将导出当前条件下所有数据而非选中数据',
        onOk () {
          that.download('manager/perform/export', {
            ...that.queryParam
          }, `perform_${new Date().getTime()}.xlsx`)
        },
        onCancel () {}
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .clearfix() {
    zoom: 1;
    &:before,
    &:after {
      content: ' ';
      display: table;
    }
    &:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
  }
  .content {
    .clearfix();
    margin-top: 16px;
    margin-left: 40px;
    & > div {
      position: relative;
      text-align: left;
      float: left;
      width: 50%;
      p {
        line-height: 32px;
        font-size: 24px;
        margin: 0;
      }
      p:first-child {
        color: 'rgba(0, 0, 0, 0.45)';
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 4px;
      }
    }
  }
</style>